<template>
	<div>
		<div class="head">
			<p v-for="item in navList" :key="item.id">{{item.title}}</p>
		</div>
		<div class="lookallNav">
			<ul class="navList">
				<li v-for="item in navList" :key="item.id" @click="tojump(item)">
					<span :class="[{present:current==item.id},{'':current!=item.id}]">{{item.name}}</span>
				</li>
			</ul>
		</div>
	</div>
	
</template>

<script>
	export default{
		name:"lookallNav",
		data(){
			return{
				current:'1',
				navList:[
					{
						id:'1',
						name:'全部',
						title:'全部订单',
						path:''
					},
					{
						id:'2',
						name:'待付款',
						title:'全部订单',
						path:''
					},
					{
						id:'3',
						name:'已付款',
						title:'全部订单',
						path:''
					},
					{
						id:'4',
						name:'待收货',
						title:'全部订单',
						path:''
					},
					{
						id:'5',
						name:'待评价',
						title:'全部订单',
						path:''
					},
					{
						id:'6',
						name:'退货售后',
						title:'全部订单',
						path:''
					}
				]
			}
		},
		methods: {
			tojump(item) {
				this.current = item.id;
				// this.$router.push({path:`/${item.path}`,
				// })
			}
		},
	}
</script>

<style scoped="scoped" lang="less">
	.head{
		height: 0.88rem;
		background: #C30D23;
		position: relative;
		p{
			position: absolute;
			font-size: 0.2rem;
			font-weight: bold;
			color: #FFFCFC;
			opacity: 1;
			top: 0.5rem;
			left: 1.48rem;
		}
	}
	
	.lookallNav{
		height: 0.48rem;
		line-height: 0.48rem;
		background: #FFFFFF;
		box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.02);
		.navList{
			display: flex;
			margin-left: 0.06rem;
			li:nth-child(1){
				margin-left: 0;
			}
			li{
				display: flex;
				margin-left: 0.2rem;
				span{
					display: inline-block;
					font-size: 0.14rem;
					font-weight: bold;
					color: #333333;
					opacity: 1;
				}
				.present{
					background-image: url(../../assets/img/bottom-icon.png);
					background-repeat: no-repeat;
					background-size: 0.22rem 0.06rem;
					background-position: center 0.4rem;
				}
			}
		}
	}
</style>
